<template lang="html">
   <div>
     <div>
        <div class="index-title">
           <mu-flexbox>
            <mu-flexbox-item class="back-flex" grow="1">
              <mu-icon-button icon="arrow_back" @click="goback"/>
            </mu-flexbox-item>
            <mu-flexbox-item class="title-flex" grow="5">
              {{ title }}
            </mu-flexbox-item>
            <mu-flexbox-item class=""  grow="1">
            </mu-flexbox-item>
          </mu-flexbox>
        </div>
     </div>
     <div>
       <transition name="fade" mode="out-in">
         <router-view></router-view>
       </transition>
     </div>
     <div class='footer'>
      <mu-paper style="max-width: 376px; ">
        <mu-bottom-nav :value="bottunVal" @change="handleChange">
          <mu-bottom-nav-item value="news" title="资讯" icon="fiber_new"/>
          <mu-bottom-nav-item value="player" title="玩家" icon="person"/>
          <mu-bottom-nav-item value="championList" title="英雄" icon="pets"/>
          <mu-bottom-nav-item value="video" title="视频" icon="ondemand_video"/>
        </mu-bottom-nav>
      </mu-paper>
     </div>
   </div>
</template>

<script>
export default {
  data: () => ({
    title: '',
    bottunVal: '',
  }),
  created() {
    this.getBottunVal();
  },
  methods: {
    goback() {
      this.$router.go('-1');
    },
    getBottunVal() {
      const pathName = this.$route.name;
      switch (pathName) {
        case 'player':
        case 'playerDetail':
        case 'combatDetail':
          this.bottunVal = 'player';
          this.title = '玩家信息';
          break;
        case 'championList':
        case 'championDetail':
          this.bottunVal = 'championList';
          this.title = '英雄列表';
          break;
        case 'video':
          this.bottunVal = 'video';
          this.title = '视频中心';
          break;
        default:
          this.bottunVal = 'news';
          this.title = '资讯';
          break;
      }
    },
    handleChange(val) {
      this.bottunVal = val;
      this.$router.push({ name: val });
      switch (val) {
        case 'player':
          this.title = '玩家信息';
          break;
        case 'championList':
          this.title = '英雄列表';
          break;
        case 'video':
          this.title = '视频中心';
          break;
        default:
          this.title = '资讯';
          break;
      }
    },
  },
};
</script>

<style lang="css" scoped>
 .index-title{
    background: #03a9f4;
    height: 45px;
  }
  .title-flex {
      text-align: center;
      color: #fff;
      font-size: 18px;
    }
  .back-flex {
    color: #fff;
  }
  .footer{
    position: fixed;
    bottom: 0;
    left:0;
    width: 100%;
  }
</style>
